import { Image } from 'antd'
import styles from './index.module.scss'

import demo from '@/assets/images/article/t.png'

import { CalendarSvg, HeatSvg, CommentSvg, LikeSvg, FloderSvg, TagSvg } from '@/assets/svg'
import XkTag from '@/components/xk-tag'

type reverseOption = "never" | "turn" | "true"

type listOption = {
  // card的高度
  height?: string | number
  // 是否需要图片
  hasImage?: boolean
  // 是否交替出现
  reverse?: reverseOption
}

const isReverse = (index: number, reverse: reverseOption) => {
  if (reverse === "turn") return index % 2 === 0;
  if (reverse === "true") return true
  return false

}
const ArticleList: React.FC<listOption> = ({ height = '300px', hasImage = true, reverse = 'turn' }) => {
  const list = [{ id: 1 }, { id: 2 }]
  return (
    <div className={styles.list}>
      {list.map((item, index) => (

        <div className={`shadowBox ${styles.card}`} style={{ height, flexDirection: isReverse(index, reverse) ? 'row-reverse' : 'unset' }} key={item.id}>
          {hasImage && (
            <div className={styles.left}>
              <Image src={demo} preview={false} height='100%' />
            </div>
          )}

          <div className={styles.right}>
            <div className={`${styles.postMeta} flex item-center`}>
              <CalendarSvg />
              &nbsp;发布于 2025/1/11 1:11:11&nbsp;
            </div>
            <h3>排序算法总结</h3>
            <div className={`${styles.postMeta} flex item-center`} style={{ marginBottom: '15px' }}>
              <HeatSvg />
              &nbsp;1111 热度&nbsp;
              <CommentSvg />
              &nbsp;1 评论&nbsp;
              <LikeSvg />
              &nbsp;0 赞&nbsp;
            </div>
            <div className={styles.postDesc}>
              壬戌之秋，七月既望，苏子与客泛舟游于赤壁之下。清风徐来，水波不兴。举酒属客，诵明月之诗，歌窈窕之章。少焉，月出于东山之上，徘徊于斗牛之间。白露横江，水光接天。纵一苇之所如，凌万顷之茫然。浩浩乎如冯虚御风，而不知其所止；飘飘乎如遗世独立，羽化而登仙。
              于是饮酒乐甚，扣舷而歌之。歌曰：“桂棹兮兰桨，击空明兮溯流光。渺渺兮予怀，望美人兮天一方。”客有吹洞箫者，倚歌而和之。其声呜呜然，如怨如慕，如泣如诉，余音袅袅，不绝如缕。舞幽壑之潜蛟，泣孤舟之嫠妇
            </div>
            <div className={styles.label} style={{ right: isReverse(index, reverse) ? 'unset' : '35px' }}>
              <XkTag SvgIcon={FloderSvg} styles={{ marginRight: '12px' }} />
              <XkTag SvgIcon={TagSvg} />
            </div>
          </div>
        </div>
      ))}
    </div >
  )
}

export default ArticleList
